.notice-enter-active,
.notice-leave-active {
  transition: transform 0.3s;
}

.notice-enter,
.notice-leave-to {
  transform: translate3d(-100%, 0, 0);
}

.notice-leave-to {
  transform: translate3d(0, -100%, 0);
}

.notice-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }

  .notice {
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
  }

  .notice.info {
    background-color: #2d9fd8;
    border-color: #31a2da;
    color: #fff;
  }

  .notice.warn {
    background-color: #d22852;
    border-color: #d22852;
    color: #fff
  }